<script setup>
import { reactive, ref, computed } from "vue";
const author1 = reactive({
  name: "John Doe",
  books: [
    "Vue 2 - Advanced Guide",
    "Vue 3 - Basic Guide",
    "Vue 4 - The Mystery",
  ],
});

const authors = ref([
  {
    name: "John Doe",
    books: [
      "Vue 2 - Advanced Guide",
      "Vue 3 - Basic Guide",
      "Vue 4 - The Mystery",
    ],
  },
  {
    name: "york",
    books: ["Vue 2 - python", "Vue 2 - python111"],
  },
]);

function calculateBooksMessage() {
  return author1.books.length > 0 ? "yes" : "no";
}
function calculateBooksMessages(author) {
  return author.books.length > 0 ? "yes" : "no";
}

const publishedBooksMessage = computed(() =>
  author1.books.length > 0 ? "yes" : "no"
);

// const publishedBooksMessages = computed((author) => {
//   return author.books.length > 0 ? "yes" : "no";
// });
</script>
<template>
  <h1>Hello world</h1>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
  <br />
  <span>{{ calculateBooksMessage() }}</span>
  <li v-for="(author, index) in authors" :key="index">
    {{ author.name }} {{ calculateBooksMessages(author) }}
  </li>
</template>